import React from 'react';
import { Form, Input, Button, Switch, TreeSelect, Space, message } from 'antd';
import { SafetyCertificateOutlined } from '@ant-design/icons';
import { roleStore } from '../store/roleStore';
import { Role } from '../store/types';

const { TextArea } = Input;

interface RoleFormProps {
  type: 'create' | 'edit' | 'view';
  initialValues?: any;
  onCancel: () => void;
}

const RoleForm: React.FC<RoleFormProps> = ({ type, initialValues, onCancel }) => {
  const [form] = Form.useForm();

  const onFinish = (values: Role) => {
    roleStore.saveRole(values);
    onCancel();
  };

  const isViewMode = type === 'view';

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
      initialValues={{
        ...initialValues,
        status: initialValues?.status === 'active',
      }}
      disabled={isViewMode}
    >
      <Form.Item
        label="角色名称"
        name="roleName"
        rules={[{ required: true, message: '请输入角色名称！' }]}
      >
        <Input placeholder="请输入角色名称" />
      </Form.Item>

      <Form.Item
        label="角色编码"
        name="roleCode"
        rules={[{ required: true, message: '请输入角色编码！' }]}
      >
        <Input placeholder="请输入角色编码" />
      </Form.Item>

      <Form.Item
        label="描述"
        name="description"
      >
        <TextArea rows={4} placeholder="请输入角色描述" />
      </Form.Item>

      <Form.Item
        label="状态"
        name="status"
        valuePropName="checked"
      >
        <Switch checkedChildren="启用" unCheckedChildren="禁用" />
      </Form.Item>

      {!isViewMode && (
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              {type === 'create' ? '创建' : '保存'}
            </Button>
            <Button onClick={onCancel}>取消</Button>
          </Space>
        </Form.Item>
      )}
    </Form>
  );
};

export default RoleForm; 